import ChartTitle from '@/components/Visual/chartTitle';
import { useEffect, useState } from 'react';
import ShowData from '../components/showData';
import './index.less';
const CurrentDayData = (props: {
  tPayableAmount: number; // 总订单应收
  tPaymentAmount: number; // 总订单实收
  tParkingTime: number; // 总停车时长（停车平均时长 = 总停车时长/总订单数）
  tTotalOrder: number; // 总订单数
}) => {
  const [DataList, setDataList] = useState([
    {
      imageName: 'orderTotal',
      titleName: '订单总额',
      Number: '0',
      unit: '元',
      isMoney: true,
    },
    {
      imageName: 'orderCount',
      titleName: '订单笔数',
      Number: '0',
      unit: '笔',
      isMoney: false,
    },
    {
      imageName: 'averageTime',
      titleName: '停车平均时长',
      Number: '0',
      unit: '小时',
      isMoney: false,
    },
    {
      imageName: 'orderActualPay',
      titleName: '订单实付',
      Number: '0',
      unit: '元',
      isMoney: true,
    },
    {
      imageName: 'payRatio',
      titleName: '缴费率',
      Number: '0',
      unit: '%',
      isMoney: false,
    },
  ]);
  const { tPayableAmount, tPaymentAmount, tParkingTime, tTotalOrder } = props;
  useEffect(() => {
    const hour = tTotalOrder === 0 ? '0' : (tParkingTime / tTotalOrder / 60).toFixed(2); //
    setDataList([
      {
        imageName: 'orderTotal',
        titleName: '订单总额',
        Number: (tPayableAmount / 100).toFixed(2),
        unit: '元',
        isMoney: true,
      },
      {
        imageName: 'orderCount',
        titleName: '订单笔数',
        Number: String(tTotalOrder),
        unit: '笔',
        isMoney: false,
      },
      {
        imageName: 'averageTime',
        titleName: '停车平均时长',
        Number: hour,
        unit: '小时',
        isMoney: false,
      },
      {
        imageName: 'orderActualPay',
        titleName: '订单实付',
        Number: (tPaymentAmount / 100).toFixed(2),
        unit: '元',
        isMoney: true,
      },
      {
        imageName: 'payRatio',
        titleName: '缴费率',
        Number: ((tPaymentAmount / tPayableAmount || 0) * 100).toFixed(2) || '0',
        unit: '%',
        isMoney: false,
      },
    ]);
    // DataList[0].Number = (tPayableAmount / 100).toFixed(2);
    // DataList[1].Number = String(tTotalOrder);
    // DataList[2].Number = String(tParkingTime / tTotalOrder);
    // DataList[3].Number = (tPaymentAmount / 100).toFixed(2);
    // DataList[4].Number = (tPaymentAmount / tPayableAmount).toFixed(2);
  }, [props]);

  return (
    <div className="currentDayData">
      <div className="title">
        <ChartTitle title="今日数据" />
        <img className="polyline" src="/visual/tabTitlePolyline.svg" alt="" />
        <img className="diamond" src="/visual/titleRectangle.svg" alt="" />
      </div>
      <div className="dataDetail">
        {DataList.map((item, index) => {
          return (
            <div className={index % 2 === 0 ? 'active' : 'item'} key={index}>
              <ShowData
                imageName={item.imageName}
                titleName={item.titleName}
                Number={item.Number}
                unit={item.unit}
                isMoney={item.isMoney}
              />
            </div>
          );
        })}
      </div>
    </div>
  );
};

export default CurrentDayData;
